<!DOCTYPE html>
<html>
<div id="app1">
    {{message}}
</div>
<div id="app2"> 
    <span v-bind:title="message">鼠标放这里</span>
</div>
<div id="app3">
    <span v-if="seen">你看的到我？</span>
</div>
<div id="app4">
    <ol>
        <li v-for="item in items">
            {{item.text}}
        </li>
    </ol>
</div>
<div id="app5">
    <p>{{message}}</p>
    <input type="button" v-on:click="reverseMethod" value="反转消息" />
</div>
<div id="app6">
    <p>{{message}}</p>
    <input v-model="message" />
</div>
<div id="app7">
    <ol>
        <todo-item v-for="item in todoList" v-bind:todo="item" v-bind:key="item.id">
        </todo-item>
    </ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app1 = new Vue({
        el: '#app1',
        data: {
            message: 'Hello xiaor!'
        }
    });

    var app2 = new Vue({
        el:'#app2',
        data:{
            message: "loading ..." + new Date().toLocaleString()
        }
    });

    var app3 = new Vue({
        el:'#app3',
        data:{
            seen:false
        }
    });

    var app4 = new Vue({
        el:'#app4',
        data:{
            items:[
                {text:"学习vue"},
                {text:"学习webpack"},
                {text:"自己写前端"}
            ]
        }
    });

    var app5 = new Vue({
        el:'#app5',
        data:{
            message:"看看中文会不会反转失败"
        },
        methods:{
            reverseMethod:function()
            {
                this.message = this.message.split('').reverse().join('');
            }
        }
    });

    var app6 = new Vue({
        el:'#app6',
        data:{
            message:"双向绑定"
        }
    })

    // Vue组件
    Vue.component("todo-item",{
        template:'<li>{{todo.text}}</li>',
        props:['todo']
    });

    var app7 = new Vue({
        el:'#app7',
        data:{
            todoList:[
                {id:1,text:"分析需求"},
                {id:2,text:"设计画图"},
                {id:3,text:"编码实现"}
            ]
        }
    });
</script>

</html>